<template class="didada">
	<view class="one">
		<view class="uni-margin-wrap">
			<swiper circular indicator-dots autoplay :interval="3000" :duration="1000">
				<swiper-item v-for="item in bannerList" :key="item.id">
					<image class="swiper-item" :src="item.picUrl" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="liebiao">
			<text style="font-size: 14px;line-height: 100rpx;">//////</text>
			<text style="font-size: 30px;margin: 0 10rpx;line-height: 100rpx;font-weight: 800;">商品列表</text>
			<text style="font-size: 14px;line-height: 100rpx;">\\\\\\</text>
		</view>
		<view class="dakapian">	
			<view class="kapian" v-for="item in shopList" :key="item.id" @click="tiaozhuan(item.id)">
				<image class="tupian" style="width: 100%;" :src="item.pic"></image>
				<view class="wenzi">
					{{item.name}}
				</view>
				<view class="qian">
					<text class="">
						<text style="font-size: 24rpx;color: #1ba784;">￥</text>
						<text style="font-size: 36rpx;color: #1ba784;">{{item.minPrice}}</text>
					</text>
					<text class=""
						style="font-size: 24rpx;color: #969799;margin-left: 5px;text-decoration: line-through;">￥{{item.originalPrice}}</text>
					<text class="anniuwai">
						<u-button class="anniu" type="primary" :plain="true" color="#1ba784">购买</u-button>
					</text>
				</view>
			</view>
		</view>
		<view class="gengduo">
			没有更多了
		</view>
	</view>
</template>
<script>
	import {
		_banner,
		_shop
	} from "../../api/home.js"
	export default {
		data() {
			return {
				bannerList: [],
				shopList: [],
				disabled: true
			}
		},
		methods: {
			getBannerList() {
				_banner().then(res => {
					// console.log(res);
					if (res.code === 0) {
						this.bannerList = res.data
					}
				})
			},
			getBannerShop() {
				_shop().then(res => {
					console.log(res);
					if (res.code === 0) {
						this.shopList = res.data.result
					}
				})
			},
			tiaozhuan(id) {
				uni.navigateTo({
					url: "../detail/detail?id="+id
				})
				// console.log(id);
			}
		},
		onReady() {
			this.getBannerList()
			this.getBannerShop()
		},

	}
</script>
<style lang="scss" scoped>
	.liebiao {
		width: 750rpx;
		height: 100rpx;
		text-align: center;
	}

	.uni-margin-wrap {
		width: 750rpx;
		width: 100%;
	}

	swiper {
		height: 360rpx;
	}

	.swiper-item {
		display: block;
		width: 750rpx;
		height: 360rpx;
		line-height: 300rpx;
		text-align: center;
	}

	.dakapian {
		width: 750rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.kapian {
		width: 365rpx;
		height: 495rpx;
		margin: 5px;
		text-align: left;
	}

	.tupian {
		width: 345rpx;
		height: 345rpx;
	}

	.wenzi {
		width: 305rpx;
		height: 72rpx;
		margin: 0 auto;
		font-size: 28rpx;
		// white-space: nowrap;
		// text-overflow: ellipsis;
		overflow: hidden;
	}

	.qian {
		width: 365rpx;
		height: 72rpx;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		line-height: 72rpx;
		position: relative;
	}

	.anniuwai {
		text-align: right;
	}

	.anniu {
		color: #1ba784;
		width: 90rpx;
		height: 50rpx;
		font-size: 20rpx;
		margin-top: 10rpx;
		position: absolute;
		top: 0;
		right: 0;

		bottom: 0;
	}

	.gengduo {
		width: 750rpx;
		height: 200rpx;
		font-size: 28rpx;
		text-align: center;
		line-height: 100rpx;
		color: #969799;
	}
</style>
